<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">
	<style>
		.open-iframe {
			margin-top: 5px;
			float: right;
			font-size: 12px;
		}
	</style>
</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">圆角图片</h5>
			</div>
			<div class="card-body">
				<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">椭圆图片</h5>
			</div>
			<div class="card-body">
				<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">缩略图</h5>
			</div>
			<div class="card-body">
				<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">图片对齐方式</h5>
			</div>
			<div class="card-body">
				<img src="cinqueterre.jpg" class="float-left">
				<img src="cinqueterre.jpg" class="float-right">
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">自适应图片</h5>
				<p>图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。</p>
			</div>
			<div class="card-body">
				<img class="img-fluid" src="cinqueterre.jpg" alt="Chania">
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">响应式图片
					<a class="open-iframe" href="imgSrcsetSizes.html" target="_blank">新窗口打开》</a>
				</h5>
			</div>
			<div class="card-body">
				<iframe width="100%" height="380" src="./imgSrcsetSizes.html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
			</div>
		</div>
	</section>
</body>

</html>